<template>
  <div class="wrapper">
    <!--      header部分-->
    <header>

      <p>商家列表</p>
    </header>
    <!--    商家列表部分-->
    <ul class="business">
      <li v-for="(item,i) in businessList" :key="i" @click="gotoBusinessInfo(item.businessId)">
        <div class="business-img">
          <img :src="item.businessImg">
          <div class="business-img-quantity" v-show="item.quantity>0">
            {{item.quantity}}
          </div>
        </div>
        <div class="business-info">
          <h3>{{item.businessName}}</h3>
          <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
          <p>{{ item.businessExplain }}</p>
        </div>
      </li>


    </ul>
    <Footer/>

  </div>
</template>

<script setup>
import "/src/assets/css/reset.css"
import axios from "axios";
import {onMounted, ref} from "vue";
import Footer from "./item/Footer.vue";
import { useRouter } from "vue-router";
import {getSessionStorage} from "../main.js";
import qs from 'qs'
let router = useRouter();
let businessList=ref([])
let user=ref({})
async function  loadBusiness() {
  // let res = await axios.get("http://localhost:8080/business/getAll")
  await axios.get("/business/getAll").then(function (response){
    console.log(response)
    businessList.value=response.data
    listCart()
  }).catch(function (error){
    console.log(error)
  })
  // console.log(res)
}
onMounted(()=>{
  user.value=getSessionStorage("user")
  loadBusiness()

})

function gotoBusinessInfo(id){
  console.log(id)
  router.push({
    path: "/businessInfo",
    query: { id: id },
  });
}
function getTotalNumFromLocalStorage(businessId) {
  // console.log("get")
  // 从本地存储中获取存储的数量并转换为数字
  const TotalNum = localStorage.getItem(businessId.toString());
  if (TotalNum) {
    return parseInt(TotalNum); // 将字符串转换为整数
  }
  return 0; // 如果没有存储的数量，则默认为0
}

async function listCart(){
  console.log( user.value.userId)
  await axios.post('cart/listCart',{
      userId: user.value.userId
  }).then(response=>{
    let cartArr = response.data;
    //遍历所有食品列表
    for(let businessItem of businessList.value){
      businessItem.quantity = 0;
      for(let cartItem of cartArr){
        if(cartItem.businessId==businessItem.businessId){
          businessItem.quantity += cartItem.quantity;
        }
      }
    }
    businessList.value.sort()
  }).catch(error=>{
    console.error(error);
  });
}

</script>
<!--<script>-->
<!--import {mapGetters} from "vuex";-->

<!--export default {-->
<!--  mounted() {-->
<!--    // console.log(this.getTotalNum(10001))-->
<!--  },-->
<!--  computed: {-->
<!--    // 使用 mapGetters 获取 totalNum 的值-->
<!--    ...mapGetters(['getTotalNum']),-->
<!--  },-->
<!--}-->

<!--</script>-->

<style scoped>
/*总容器*/
.wrapper{
  width: 100%;
  height: 100%;
}
/*header部分*/
.wrapper header{
  width:100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

}

/*商家列表*/
.wrapper .business{
  width: 100%;
  margin-top: 12vw;
  padding-bottom: 14vw;
}
.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select:none;
  cursor: pointer;

  display: flex;
  align-items: center;

}
.wrapper .business li .business-img{
  position: relative;
}

.wrapper .business li .business-img img{
  width: 20vw;
  height: 20vw;

}
.wrapper .business li .business-img .business-img-quantity{
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .business li .business-info{
  margin-left: 3vw;
}
.wrapper .business li .business-info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

/*底部菜单部分*/
.wrapper .footer{
  width: 100%;
  height: 14vw;
  border-top: #DDD;


  background-color: white;
  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .footer li{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}
.wrapper .footer li p{
  font-size: 2.8vw;

}
.wrapper .footer li i{
  font-size: 5vw;
}
</style>